<template>
	<page-meta :page-style="$theme.pageStyle">
		<!-- #ifndef H5 -->
		<navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
		<!-- #endif -->
	</page-meta>
	<z-paging ref="paging" v-model="activityData" @query="queryList" :fixed="false" height="100%" use-page-scroll>
		<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in activityData" :key="item.id" btn-width="120">
			<view class="news-card bg-white flex px-[20rpx] py-[32rpx]">
				<view class="mr-[30rpx] u-text-center">
				    <u-image :src="item.user.avatar" width="75" height="75"></u-image>
					<view class="mt-[15rpx]">{{item.user.nickname}}</view>
				</view>
				<view class="news-card-content flex flex-col justify-between flex-1">
					<view class="news-card-content-title text-base">{{ item.title }}</view>
					<view class="text-muted text-xs w-full flex justify-between mt-[12rpx]">
						<view>{{ item.time }}</view>
					</view>
				</view>
			</view>
		</u-swipe-action>
	</z-paging>
</template>

<script lang="ts" setup>
import { ref, reactive, shallowRef } from 'vue';
import { getHexiaolist } from '@/api/user';

const paging = shallowRef();

const activityData: any = ref([]);

const queryList = async (pageNo, pageSize) => {
	const { lists } = await getHexiaolist();
	lists.forEach((item: any) => {
		item.show = false;
	});
	activityData.value.concat(lists);
	paging.value.complete(lists);
};

</script>

<style scoped>
	
</style>
